<template>
  <div class="container">
    <TableComponent
      :current-page="currentPage"
      :page-size="pageSize"
      @update-total="handleUpdateTotal"
    />
    <PaginationComponent
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
    />
  </div>
</template>
  
<script lang="ts" setup>
import { ref } from "vue";
import TableComponent from "./Table.vue";
import PaginationComponent from "./Page.vue";

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const handleUpdateTotal = (newTotal: number) => {
  total.value = newTotal;
};
</script>
  
<style scoped>
.container {
  width: 100%;
  max-width: 700px; /* 控制最大宽度 */
  margin: 0 auto; /* 水平居中 */
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

/* 添加表格容器样式 */
:deep(.el-table) {
  margin: 0 auto;
  width: auto !important; /* 取消固定宽度 */
  min-width: 80%; /* 最小宽度 */
}

/* 分页居中 */
:deep(.el-pagination) {
  justify-content: center !important;
}
</style>